<template>
	<view class="modelHouses">
		<!-- 头部筛选 -->
		<view class="screen">
			<view @click="getReason">
				<text>筛选</text>
				<image src="../../../static/image/icon/shaixuan.png"></image>
			</view>

			<!-- 下拉框 -->
			<!-- 遮罩层 -->
			<view class="yinying" :class="[show?'':'tui-mask-show']" v-if="mask" @click="yinying"></view>
			<!-- 下拉的内容 -->
			<view class="Drop_down" :class="{'tui-popup-show':show}">
				<view v-show="isHidden">
					<view class="Drop_down_screen" v-for="(item,index) in Category" :key="index">
						<view class="Drop_down_screen_title">{{item.name}}</view>
						<view class="Drop_down_screen1">
							<view class="screen1"
								:class="[child.ishow ? '' :'isactive1' ,subIndex[index]==sey? 'isactive': '']"
								v-for="(child,sey) in item.child" :key="sey"
								@click="getScreen1(child,index,$event,sey,item)">
								{{child.name}}
							</view>
						</view>

					</view>	
					<view class="btn">
						<view class="Reset" @click="Reset">取消</view>
						<view class="determine" @click="Submit">确定</view>
					</view>			
				</view>

			</view>
		</view>
		<!-- 展示内容数据 -->
		<view class="modelHouses_items" >
			
			<view class="modelHouses_item" v-for="(item,index) in list" :key="index" @click="getProductDetails(item)">
				<view class="modelHouses_item_img">
					<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
					<view class="image_3d">
						3D
					</view>
				</view>
				<view class="modelHouses_item_numbere">
					<text class="num1">{{item.category125.name}}</text>
					<text class="line"></text>
					<text class="num1">{{item.category126.name}}</text>
					<text class="line"></text>
					<text class="num1">{{item.price}}万</text>
				</view>
				<view class="modelHouses_item_name">{{item.title}}</view>
				<view class="modelHouses_item_browse">浏览{{item.views}}</view>
				<!-- 定位 -->
			
			</view>			
		</view>	
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 阴影显示隐藏
				mask: false,
				// 下拉框显示隐藏
				show: false,
				isHidden: false,
				// 全部1
				isColor1: 0,
				isColor2: 0,
				isColor3: 0,
				isColor4: 0,
				isColor5: 0,
				
				// 筛选的数据
				Category: [],
				// 展示渲染的数据
				list: [],
				selectArr: [],
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				nid:'',
				nid1:'',				
				nid2:'',
				nid3:'',				
				nid4:'',
			};
		},
		computed: {
          canCount() {
				return this.subIndex.some(item => item === -1);
			},
		},
		methods: {
			//通过点击遮罩层阴影隐藏
			yinying() {
				this.mask = false;
				this.show = false;
				setTimeout(() => {
					this.isHidden = !this.isHidden;
				}, 500)
			},
			// 弹框中的取消
			Reset(){
			this.yinying();	
			},
			// 点击筛选中的确定按钮筛选条件
			Submit(){
			 this.$api.get({
				url: '/wanlshop/Common/modelHouseList',
				data:{
					category124:this.nid,
					category125:this.nid1,
					category126:this.nid2,
					category127:this.nid3,
					category128:this.nid4
				},			
				success: res => {
					console.log('res',res)					
				}
			});	
			},
			// 点击筛选按钮
			getReason() {
				this.mask = !this.mask;
				this.show = !this.show;
				setTimeout(() => {
					this.isHidden = !this.isHidden;
				}, 500)
			},
			// 点击筛选中的全部样式
			getScreen1(value, spukey, event, index,item) {
				
				// console.log('wId',wId);
				// console.log('nId',nId)
				if (value.ishow ) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);						
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
						// console.log('121')
					}
					
					if(spukey==0){
						
						if(value.name=='全部'){
							this.nid='';
						}else{
							this.nid=value.id;
						}
					}
					if(spukey==1){
						if(value.name=='全部'){
							this.nid1='';
						}else{
							this.nid1=value.id;
						}
					}
					if(spukey==2){
						if(value.name=='全部'){
							this.nid2='';
						}else{
						this.nid2=value.id;	
						}
					}
					 if(spukey==3){
						if(value.name=='全部'){
							this.nid3='';
						}else{
							this.nid3=value.id;
						}
					}
					 if(spukey==4){
						if(value.name=='全部'){
							this.nid4='';
						}else{
							this.nid4=value.id;
						}
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						this.selectNum = 1;
					}

				}
			},
			// 点击筛选中的全部样式
			getScreen2(item, index) {
				this.isColor2 = index;
			},
			// 点击筛选中的全部样式
			getScreen3(item, index) {
				this.isColor3 = index;
			},
			getScreen4(item, index) {
				this.isColor4 = index;
			},
			getScreen5(item, index) {
				this.isColor5 = index;
			},
			// 渲染样板房数据
			getList() {
				this.$api.get({
					url: '/wanlshop/common/modelHouseList',
					success: res => {
						this.list = res

						console.log('样板房数据', res);
					}
				});
			},
			// 展示筛选的所有数据
			getCategory() {
				this.$api.get({
					url: '/wanlshop/common/modelHouseCategory',

					success: res => {
						this.Category = res
						var obj={
							id:1,
							name:'全部'
						}
                       if(res.length!=0){
						   for(var i=0;i<res.length;i++){	
							   res[i].child.push(obj);	
								// 根据id从大到小进行排序
								for (var j = 1; j < res[i].child.length; j++) {
									// console.log(res[i].child.length,'op')
									for (var k = 0; k < res[i].child.length - 1; k++) {
										var max =  res[i].child[k].id;
										var next =  res[i].child[k + 1].id;
										if (next< max) {
											var preData =  res[i].child[k];
											 res[i].child[k] =  res[i].child[k + 1];
											 res[i].child[k + 1] = preData;
										}
									}
								}									  
																	  }
						   
					   }
					  
						this.Category.map(item => {
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						// this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
						console.log('样板房数据', res);
					}
				});
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.Category.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},
			checkInpath(clickIndex) {

				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.Category.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.Category[i].child.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.Category[i].child[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (!this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.Category[i].child[j], 'ishow', true);
						} else {
							this.$set(this.Category[i].child[j], 'ishow', false);
						}
					}
				}
			},
			// 点击商品跳转到商品详情
			getProductDetails(item){
				console.log('item',item)
				// var url='https://www.baidu.com'
				// item.attachfile
				uni.navigateTo({
					url:'../../mines/order/webview?url='+encodeURIComponent(item.url)
				})
				this.$api.get({
					url: '/wanlshop/common/modelHouseView',
					data:{
						id:item.id
					},
				
					success: res => {
						console.log('res',res)
						
					}
				});
			},
		},
		onLoad() {
			this.getList();
			this.getCategory();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.modelHouses {

		.screen {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			position: relative;

			text {
				font-size: 26rpx;
				color: #888888;
				margin-left: 20rpx;
			}

			image {
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
			}

			.yinying {
				background-color: rgba(0, 0, 0, .3);
				position: absolute;
				top: 60rpx;
				left: 0;
				right: 0;
				width: 750rpx;
				height: 1200rpx;
				z-index: 99996;
				transition: all 0.3s ease-in-out;
				opacity: 1;
				// visibility: hidden;
				z-index: 999;
			}

			.tui-mask-show {
				opacity: 0;
				visibility: visible;
			}

			// 下拉框
			.Drop_down {
				position: absolute;
				top: 60rpx;
				left: 0;
				right: 0;
				width: 750rpx;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				height: 0;
				background-color: #ffffff;
				// background-color: red;
				align-items: center;
				justify-content: center;

				transition-property: width, height, background-color;
				transition-duration: 0.5s;
				transition-delay: 0.1s;
				transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
				// display:none;
				z-index: 9999;
				opacity: 0;

				.Drop_down_screen {
					// background-color: pink;

					// height: 70rpx;
					border-bottom: 1px dashed #e9e9e9;
					margin-bottom: 10rpx;

					.Drop_down_screen_title {
						font-size: 28rpx;
						color: #282828;
					}

					.Drop_down_screen1 {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						// background-color: #007AFF;


						.screen1 {
							font-size: 26rpx;
							// width: 110rpx;
							padding: 0 29rpx;
							height: 50rpx;
							text-align: center;
							line-height: 50rpx;
							color: #888888;
							// background-color: red;
							border-radius: 50rpx;
							margin: 0 5rpx 10rpx;
							box-sizing: border-box;
						}

						.isactive {
							color: #FFFFFF;
							background-color: #ff0000;
						}
						.isactive1{
							color: #FFFFFF;
							background-color: #ff0000;
						}
					}
				}
				.btn {
					// background-color: pink;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 60rpx;
					margin-bottom: 10rpx;
				
					view {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 26rpx;
						text-align: center;
					}
				
					.Reset {
						background-color: #dcdcdc;
						color: #000000;
						border-radius: 50rpx 0 0 50rpx;
					}
				
					.determine {
						background-color: #e71f19;
						color: #FFFFFF;
						border-radius: 0 50rpx 50rpx 0;
					}
				}
			}

			.tui-popup-show {
				width: 750rpx;
				height: 790rpx;
				overflow: auto;
				// transform: translate3d(0,100%,0);
				// transform: translateY(0px);
				// transition-duration: 0.3s;
				// visibility: visible;
				background-color: #FFFFFF;
				// display: block;
				opacity: 1;


			}
		}

		.modelHouses_items {
			// background-color:pink;
			width: 730rpx;
			margin: 20rpx auto 0;
			display: flex;			
			flex-wrap: wrap;
			justify-content: space-between;

			.modelHouses_item {
				width: 350rpx;
				background-color:#FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				
				padding-bottom: 15rpx;
				box-sizing: border-box;

				.modelHouses_item_img {

					width: 350rpx;
					height: 330rpx;
					// background-color: pink;
					position: relative;

					image {
						width: 350rpx;
						height: 330rpx;
						border-radius: 8rpx 8rpx 0 0;
					}

					.image_3d {
						position: absolute;
						top: 30rpx;
						right: 30rpx;
						background-color: rgba(0, 0, 0, 0.6);
						width: 50rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						border-radius: 50%;
						color: #FFFFFF;
						font-size: 25rpx;
					}
				}

				.modelHouses_item_numbere {
					font-size: 22rpx;
					color: #8c8b8b;
					display: flex;
					align-items: center;
					margin-left: 15rpx;

					.num1 {
						// margin-right: 10rpx;
						// background-color: pink;
					}

					.line {
						display: inline-block;
						background-color: #8c8b8b;
						width: 1rpx;
						height: 25rpx;
						margin: 10rpx;
					}
				}

				.modelHouses_item_name {
					font-size: 25rpx;
					color: #282828;
					margin: 10rpx 15rpx;
					// 多行显示超出部分显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					word-break: break-all;
				}

				.modelHouses_item_browse {
					font-size: 25rpx;
					color: #8c8b8b;
					margin: 0 15rpx;
					text-align: right;
					// background-color: pink;
					// margin-bottom: 15rpx;
				}
			}
		}
	}
</style>
